<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>监考统计</title>
    <link href="{{url_for('static',filename='css/layui.css')}}" rel="stylesheet">
    <script src="{{url_for('static',filename='jquery-3.7.1.min.js')}}"></script>
</head>

<body>
    <div class="layui-container">
        <ul class="layui-nav">
            <li class="layui-nav-item layui-this"><a href="/">导入数据</a></li>
            <li class="layui-nav-item"><a href="/">光大数据</a></li>
            <li class="layui-nav-item"><a href="">差异</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">选项</a>
                <dl class="layui-nav-child">
                    <dd><a href="">选项1</a></dd>
                    <dd class="layui-this"><a href="">选项2</a></dd>
                    <dd><a href="">选项3</a></dd>
                </dl>
            </li>
        </ul>
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-md12">
                <table class="layui-table" id="table-main"></table>
            </div>
        </div>
    </div>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs1 layui-col-md1">
                <button data-url="api?id=1" class="layui-btn">test</button>
            </div>
        </div>
    </div>

    <script src="{{url_for('static',filename='layui.js')}}"></script>
    <script>
        // Usage
        layui.use(function () {
            var layer = layui.layer;
            // Welcome
        });
        layui.use('table', function () {
            var table = layui.table;

            // 已知数据渲染
            var inst = table.render({
                elem: '#table-main',
                cols: [[ //标题栏
                    { field: 'id', title: 'ID', width: 80, sort: true },
                    { field: 'username', title: '姓名', width: 120, edit: 'text' },
                    { field: 'sign', title: '签名', minWidth: 160 },
                    { field: 'sex', title: '性别', width: 80 },
                    { field: 'city', title: '城市', width: 100 },
                    { field: 'experience', title: '积分', width: 80, sort: true }
                ]],
                data: [{ // 赋值已知数据
                    "id": "10001",
                    "username": "张三1",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "116"
                }, {
                    "id": "10002",
                    "username": "张三2",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "12",
                    "LAY_CHECKED": true
                }, {
                    "id": "10003",
                    "username": "张三3",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "65"
                }, {
                    "id": "10004",
                    "username": "张三4",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "777"
                }, {
                    "id": "10005",
                    "username": "张三5",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "86"
                }, {
                    "id": "10006",
                    "username": "张三6",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "12"
                }, {
                    "id": "10007",
                    "username": "张三7",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "16"
                }, {
                    "id": "10008",
                    "username": "张三8",
                    "sex": "男",
                    "city": "浙江杭州",
                    "sign": "人生恰似一场修行",
                    "experience": "106"
                }],
                //skin: 'line', // 表格风格
                //even: true,
                page: true, // 是否显示分页
                limits: [50, 100, 150],
                limit: 100 // 每页默认显示的数量

            });
        });
        layui.use(function () {
            var table = layui.table;
            table.on('edit(table-main)', function (obj) {
                var field = obj.field; // 得到修改的字段
                var value = obj.value // 得到修改后的值
                var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
                var data = obj.data // 得到所在行所有键值
                var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
                console.log(obj); // 查看对象所有成员
                $.post('/api/test'
                    , { data: data }
                    , function (r) {
                        console.log("ajax return:")
                        console.log(r)
                    }
                )
                // 值的校验
                if (value.replace(/\s/g, '') === '') {
                    layer.tips('值不能为空', this, { tips: 1 });
                    return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                }
                // 编辑后续操作，如提交更新请求，以完成真实的数据更新
                // …

                // 更新当前缓存数据
                var update = {};
                update[field] = value;
                obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
            });
        });
    </script>
</body>
<script src="{{url_for('static',filename='footer.js')}}"></script>

</html>